<template>
    <div class="tab" v-if="tab&&tab.length>0">
        <div class="title">
            <div class="title-left">

                <span v-if="index===0"  v-for="(item,index) in tab" class="active">{{item.title}}</span>
                <span  v-if="index!==0"  v-for="(item,index) in tab"><a style="text-decoration: none;color: #2e436d" :href="'#/pinpai/' + item.id">{{item.title}}</a></span>
            </div>
            <a href="#/kandeng" class="title-right">刊登</a>
        </div>
        <div class="main">
            <div class="main-item" v-for="(item,index) in list" v-if="index<=11">
                <a :href="'#/detail/' +item.brand_id">
                    <div class="img">
                        <img :src="brandImg+item.brand_logo" alt="">
                    </div>
                    <div class="main-item-text">{{item.brand_name}}</div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index-tab",
        props:{
            tab:{
                type:Array,
            },
            list:{
                type:Array
            }
        },
        data() {
            return {
                activeIndex:0
            }
        }
    }
</script>

<style scoped lang="less">
    a{
        color: #000000;
    }
    .title{
        height: 48px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 4px solid #2e436d;
        margin-bottom: 15px;
        .title-left{
            span{
                display: inline-block;
                padding:  0 18px;
                height: 48px;
                line-height: 48px;
                font-size: 24px;
                color: #2e436d;
                position: relative;
                cursor: pointer;
                &.active{
                    background-color:#2e436d;
                    color: #ffffff;
                }
                &:after{
                    content: "";
                    position: absolute;
                    height: 30px;
                    top: 9px;
                    right: 0;
                    width: 2px;
                    background-color: #2e436d;
                }
                &:last-child::after{
                    display: none;
                }

            }
        }
        .title-right{
            cursor: pointer;
            font-size: 16px;
            line-height: 16px;
            padding: 5px;
            color: gray;
            border: 1px solid gray;
        }
    }
    .main{
        width: 100%;
        margin: 0 auto;
        background-color: #f9f9f9;
        padding:10px 0px;
        box-sizing: border-box;
        .main-item{
            display: inline-block;
            width: 24%;
            margin: 10px 0.5%;
            box-sizing: border-box;
            border: 1px solid #e6e6e6;
            &:nth-child(4n){
                margin-right: 0;
            }
            .img{
               width: 100%;
               height: 112px;
                overflow: hidden;
                display: flex;
                flex-direction: row;
                align-items: center;
                img{
                    width: 100%;
                }
            }
            .main-item-text{
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 16px;
                width: 100%;
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/* 超出部分显示省略号 */
                white-space: nowrap;/*规定段落中的文本不进行换行 */
            }
        }
    }

</style>
<style lang="less">
    .tab{
        .swiper-box{
            justify-content: flex-start !important;
        }
    }
</style>